<template>
  <div class="c-bg-sgray c-p c-text-hidden" ref="bgHeight">
    <div class="c-w100 c-pz10 c-maxw640" id="tabFixed">
      <div class="c-pt14 c-bg-white">
        <new-search-bar :selectList="selectList" :searchText="searchText" @showWidth="showSearch" @search='startSearch' @cancel='hideSearch' @input="biindInput" bgSearch="c-bg-white"></new-search-bar>
      </div>
      <div id="setScroll" class="c-pv24 c-flex-row c-aligni-center c-ph24 c-w100 c-justify-sb">
        <div class="c-flex-row c-aligni-center">
          <div class="c-fs22 c-fc-gray">订单<span class="theme-fc">{{orderNumber}}</span>条，销售额<span class="theme-fc">￥{{Number(payMoney).toFixed(2)}}</span></div>
        </div>
        <div class="c-fc-xblack c-fs22" @click="isShowSet = true;">{{type == 1 ? '累计' : type == 2 ? '近7天' :  type == 3 ? '本月' :  type == 4 ? '上个月' :  '自定义'}}<span class="icon iconfont c-pl10 c-fs22 c-fc-xblack">{{isShowSet ? '&#xe6ab;' : '&#xe6a9;'}}</span></div>
      </div>
    </div>
    <div class="c-ph24 c-pb20">
      <div class="c-br10 c-bg-white c-w100 c-mb20 c-ph20 c-pt20 c-pb30" v-for="(item, index) in dataList" :key="index">
        <div class="c-flex-row c-justify-sb c-aligni-center">
          <div class="c-flex-row c-aligni-center">
            <img :src="$addXossFilter(item.headimgurl, require('@/assets/defult_head.png'))" class="c-ww56 c-hh56 c-br50"/>
            <span class="c-fs20 c-fc-xblack c-ml8">{{item.nickname}}</span>
          </div>
          <div :class="item.cStatus == 2 ? 'djs' : 'yjs'">{{item.cStatus == 2 ? '待结算' : '已结算'}}</div>
        </div>
        <div class="c-flex-row c-mt20">
          <img :src="$addXossFilter(item.avatar, require('@/assets/defult270.png'))" class="c-ww120 c-hh80 c-br10 c-mr20"/>
          <div class="c-flex-column c-justify-sb c-hh80 c-flex-grow1 c-w0">
            <div class="c-text-ellipsis1 c-fs24 c-fc-xblack c-fw500">{{item.prodName}}</div>
            <div class="c-fs20 c-fc-gray">实付：<span class="c-fc-xmlred c-fs24 c-fw600">￥{{Number(item.payMoney).toFixed(2)}}</span> <span v-if="item.payMethod == 4 && item.offlinePayMoney">线下实付：<span class="c-fc-xmlred c-fs24 c-fw600">￥{{Number(item.offlinePayMoney).toFixed(2)}}</span></span> <span v-if="item.refundMoney && Number(item.refundMoney) > 0" class="c-ml20">退：<span class="c-fc-xxblue c-fs24 c-fw600">￥{{Number(item.refundMoney).toFixed(2)}}</span></span></div>
          </div>
        </div>
        <div class="c-mt20 c-flex-column">
          <div class="c-fs20 c-fc-gray">订单编号：<span class="c-fs20 c-fc-xblack">{{item.orderNo}}</span><span class="c-fs20 c-fc-xblack c-bg-f2 c-br12 c-ph10 c-pv4 c-ml14" @click="doCopy(item.orderNo)">复制</span></div>
          <div class="c-fs20 c-fc-gray c-mt10">支付时间：<span class="c-fs20 c-fc-xblack">{{item.payAt}}</span></div>
          <div class="c-fs20 c-fc-gray c-mt10">推荐人：<span class="c-fs20 c-fc-xblack">{{item.rNickname}}</span></div>
        </div>
      </div>
      <loading-status-tem :dataStatus="dataStatus" :noDataText="'暂无记录'"></loading-status-tem>
    </div>
    <!--时间选择-->
    <open-modal class="c-pz100" :openModal='isShowSet' @closeModal='isShowSet = false; timeType = type;'>
      <div class="c-bg-white c-br-tl20 c-br-tr20 c-p c-minh720">
        <div class="c-w100 c-textAlign-c c-fs28 c-lh40 c-pt40 c-fc-xblack c-fw-b c-pb30">支付时间</div>
        <i class="iconfont c-pa c-p-t20 c-p-r24 c-fc-gray c-fw600 c-fs20 c-ww30 c-hh30 c-lh30 c-textAlign-c c-brp50 c-flex-row c-flex-center" @click="isShowSet = false; timeType = type;">&#xe8fd;</i>
        <div class="c-ph40 c-p">
          <div class="c-flex-row c-aligni-center c-flexw-wrap">
            <div class="c-ww128 c-br30 c-textAlign-c c-pv15 c-fs24 c-lh24 c-mr16 " :class="timeType == 2 ? 'theme-fc theme-bg-10 theme-bd1' : 'c-fc-xblack c-bg-f2'" @click="timeType = 2;">近7天</div>
            <div class="c-ww128 c-br30 c-textAlign-c c-pv15 c-fs24 c-lh24 c-mr16 " :class="timeType == 3 ? 'theme-fc theme-bg-10 theme-bd1' : 'c-fc-xblack c-bg-f2'" @click="timeType = 3;">本月</div>
            <div class="c-ww128 c-br30 c-textAlign-c c-pv15 c-fs24 c-lh24 c-mr16 " :class="timeType == 4 ? 'theme-fc theme-bg-10 theme-bd1' : 'c-fc-xblack c-bg-f2'" @click="timeType = 4;">上个月</div>
            <div class="c-ww128 c-br30 c-textAlign-c c-pv15 c-fs24 c-lh24 " :class="timeType == 1 ? 'theme-fc theme-bg-10 theme-bd1' : 'c-fc-xblack c-bg-f2'" @click="timeType = 1;">累计</div>
            <div class="c-mt30 c-ph40 c-br30 c-textAlign-c c-pv15 c-fs24 c-lh24 c-mr16 " :class="timeType == 5 ? 'theme-fc theme-bg-10 theme-bd1' : 'c-fc-xblack c-bg-f2'" @click="timeType = 5;">自定义时间</div>
          </div>
          <div class="c-mt30 c-flex-row c-justify-sb c-aligni-center" v-if="timeType == 5">
            <div id="startDate" class="c-ww250 c-pv15 c-fs24 c-lh24 c-textAlign-c c-br30 theme-fc " :class="startDate != '' ? 'theme-bd1' : 'c-bd1-gray'">
              <datetime :themeColor="$getThemeColor()" min-year="2015" max-year="2100" v-model="startDate" start-date="2015-01-01" @on-confirm="confirmTime($event, 0)"
                placeholder="年-月-日" value-text-align="center"></datetime>
            </div>
            <span class="c-fs20 c-fc-xblack">至</span>
            <div id="endDate" class="c-ww250 c-pv15 c-fs24 c-lh24 c-fc-xblack c-textAlign-c c-br30 " :class="endDate != '' ? 'theme-bd1' : 'c-bd1-gray'">
              <datetime :themeColor="$getThemeColor()" min-year="2015" max-year="2100" v-model="endDate" :start-date="startDate" @on-confirm="confirmTime($event, 1)"
                placeholder="年-月-日" value-text-align="center"></datetime>
            </div>
          </div>
          <div class="tbtn c-br32 c-ww580 theme-bg c-fc-white c-fs24 c-textAlign-c c-pv16" @click="changeTime()">确定</div>
        </div>
      </div>
    </open-modal>
  </div>
</template>

<script>
import { Datetime } from 'ckjrweb-mp-ui/src/components/index';
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import newSearchBar from "@/components/templates/common/newSearchBar.vue";
import OpenModal from "@/components/templates/common/openModal.vue";
import { utilJs } from "@/utils/common.js"
let pageIndex = 1;
let limit = 10;
export default {
  name: 'MyTeamPerformance',
  components: {
    Datetime,
    loadingStatusTem,
    newSearchBar,
    OpenModal,
  },
  props: [],
  beforeCreate() {
  },
  created() {
    utilJs.appShare(this);
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      customName: JSON.parse(localStorage.getItem("customName")),
      dataStatus: 'HAS_MORE_DATA',
      selectList: [["商品名", "推荐人"]],
      themeColor: localStorage.getItem("colorName") || 'mb5_default',
      searchText: '',
      isShowSet: false, //是否显示设置, false未开启设置
      isSearch: false,
      startDate: '', // 自定义开始时间
      endDate: '', // 自定义结束时间
      timeType: 2, // 1：累计，2：近7天，3：本月，4：上月, 5自定义
      type: 2, // 1：累计，2：近7天，3：本月，4：上月, 5自定义
      prodName: "", // 商品名
      trNickname: "", // 推荐人
      dataList: [],
      orderNumber: 0, // 订单数
      payMoney: 0, // 销售额
    }
  },
  mounted() {},
  computed: {
  },
  filters: {
  },
  methods: {
    // 时间筛选
    changeTime() {
      this.isShowSet = false;
      if (this.timeType != 5) {
        this.startDate = "";
        this.endDate = "";
        this.type = this.timeType;
        this.reGetData();
      } else {
        if (this.startDate != "" && this.endDate != "") {
          this.type = this.timeType;
          this.reGetData();
        } else {
          this.$showCjToast({
            text: "请选择自定义时间",
            type: "warn"
          });
        }
      }
    },
    // 选择时间
    confirmTime(val, index) {
      if (index == 0) {
        this.startDate = val;
      } else {
        this.endDate = val;
      }
    },
    doCopy(orderId) {
      utilJs.copyText(orderId);
    },
    //绑定搜索框的值，切换时清空
    biindInput(e) {
      this.searchText = e.searchValue
    },
    showSearch() {
      this.isSearch = true;
    },
    hideSearch(data) {
      this.isSearch = false;
      this.startSearch(data)
    },
    startSearch(data) {
      window.scrollTo(0, 0)
      // 点击搜索
      let si = data.selectItem;
      this.prodName = "";
      this.rNickname = "";
      if (si == '商品名') {
        this.prodName = data.searchValue;
      } else if (si == '推荐人') {
        this.rNickname = data.searchValue;
      }
      this.reGetData();
    },
    reGetData() {
      pageIndex = 1;
      this.dataList = [];
      this.getTeamPerformace();
    },
    getTeamPerformace() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod( `${global.apiurl}agentTeam/getTeamPerformanceList?page=${pageIndex}&limit=${limit}&timeType=${this.type}&rNickname=${this.rNickname}&prodName=${this.prodName}&startTime=${this.startDate}&endTime=${this.endDate}`, res => {
        this.orderNumber = res.orderNumber; // 订单数
        this.payMoney = res.payMoney; // 销售额
        if (pageIndex == 1) {
          this.dataList = res.data.data;
        } else {
          this.dataList = [...this.dataList, ...res.data.data];
        }
        if (res.data && res.data.data.length < 10) {
          this.dataStatus = pageIndex == 1 && res.data.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          pageIndex++;
        }
      }, failRes => {
        this.dataStatus = 'DATA_ERROR';
      })
    },
    //分享
    wechatShare: function () {
      let title = `升级${this.customName.serviceProviderName}`;
      let shareImg = 'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/common/provider.png';
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/agent/agentIndex?refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = "点击查看详情";
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { }, true);
    },
    //手机端分享
    appShare: function () {
      let title = `升级${this.customName.serviceProviderName}`;
      let shareImg = 'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/common/provider.png';
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/agent/agentIndex?refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = "点击查看详情";
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.dataList.length > 0) {
          this.getTeamPerformace()
        }
      });
    },
  },
  activated() {
    setDocumentTitle("团队业绩");// eslint-disable-line
    this.customName = JSON.parse(localStorage.getItem("customName"));
    pageIndex = 1;
    this.dataStatus = 'HAS_MORE_DATA';
    this.searchAfterShow = true;
    this.isShowSet = false;
    this.searchText = ''
    this.isSearch = false;
    this.dataList = [];
    this.startDate = ""; //utilJs.getNowTimeFormat();
    this.endDate = '';
    this.timeType = 2;
    this.type = 2;
    this.prodName = "";
    this.rNickname = "";
    this.orderNumber = 0; // 订单数
    this.payMoney = 0; // 销售额
    this.getTeamPerformace();
    this.wechatShare();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    this.dataStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#startDate >>> .vux-cell-value, #endDate >>> .vux-cell-value {
  color: #333333!important;
}
.djs {
  background: rgba(255, 48, 12, 0.1);
  color: #ff300c;
}
.yjs {
  background: rgba(37, 138, 253, 0.1);
  color: #258afd;
}
.yjs, .djs, .js {
  padding: 0.2rem 0.2rem;
  border-radius: 0.1rem;
  font-size: 0.5rem;
  letter-spacing: 0;
}
.tbtn {
  width: 14.5rem;
  position: fixed;
  bottom: 2rem;
}
</style>